import { useContext } from 'react';
import { Context } from '@/draw/Context';
import { CustomImage } from '@/draw/CustomImage';
import styles from './imgMask.module.less';

const cropList = [
    '/circle.svg',
    '/rect.svg',
    '/mask1.svg',
    '/mask2.svg'
]

// 映射SVG路径到遮罩类型
const svgToMaskType: Record<string, string> = {
    '/circle.svg': 'circle',
    '/rect.svg': 'rect',
    '/mask1.svg': 'heart',  // 心形遮罩
    '/mask2.svg': 'star'    // 星形遮罩
};

const ImgMask = () => {
    const { canvas, selectShape } = useContext(Context);

    const handleCrop = (item: string) => {
        if (!canvas || !selectShape) {
            console.warn('No canvas or selected shape');
            return;
        }

        // 检查选中的对象是否是CustomImage实例
        if (selectShape instanceof CustomImage) {
            const maskType = svgToMaskType[item] || 'rect';
            selectShape.setMaskType(maskType);
            console.log(`Applied mask type: ${maskType} to selected image`);
        } else {
            console.warn('Selected object is not a CustomImage instance');
        }
    }
    
    return (
        <div className={styles.img_mask}>
            <div>裁切形状</div>
            <div className={styles.crop_list}>
                {
                    cropList.map(item => {
                        return (
                            <img onClick={() => handleCrop(item)} key={item} className={styles.crop_item} src={item} alt="" />
                        )
                    })
                }
            </div>
        </div>
    );
};

export default ImgMask;